{% extends 'frontend/base.html' %}
{% load i18n %}
{% block content %}
    <div class="row profile-page">
        <div class="col-12">
            <div class="card">
                <div class="card-body ipdetail">
                    <h3 class="card-title">{% trans "IP detail" %}</h3>
                    <p class="card-description">
                    <ul class="list-ticked">
                        <li>IP address: {{ data.target }}</li>
                        <li>Last record time: {{ data.published_from }}</li>
                        {% if data.proper %}
                            <li>{% trans "Asset own" %}:
                                {% for pp in data.proper %}
                                    <a
                                            href="{% url 'zc-detail' pp.1 %}">{{ pp.0 }}</a>&nbsp;
                                {% endfor %}
                            </li>
                        {% endif %}
                    </ul>
                    </p>

                    <div class="profile-body">
                        <ul class="nav tab-switch" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active show" id="user-profile-info-tab" data-toggle="pill"
                                   href="#user-profile-info" role="tab" aria-controls="user-profile-info"
                                   aria-selected="true">Basic</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="user-profile-activity-tab" data-toggle="pill"
                                   href="#user-profile-activity" role="tab" aria-controls="user-profile-activity"
                                   aria-selected="false">History record</a>
                            </li>
                        </ul>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="tab-content tab-body" id="profile-log-switch">
                                    <div class="tab-pane fade pr-3 active show" id="user-profile-info" role="tabpanel"
                                         aria-labelledby="user-profile-info-tab">

                                        <div class="row mt-4 pb-5 border-bottom">

                                            <div class="col-8">
                                                <table class="table table-bordered">
                                                    <tbody>
                                                    <tr>
                                                        <td>{% trans "IP address" %}</td>
                                                        <td>{{ data.target }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Country" %}</td>
                                                        <td>
                                                            <i class="flag-icon flag-icon-{{ data.location.country_id|lower }}"></i> {{ data.location.country }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "City" %}</td>
                                                        <td>{{ data.location.region }}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>{% trans "Ports" %} / {% trans "Services" %}</td>
                                                        <td>{% for info in data.infos %}
                                                            <div class="badge badge-primary badge-pill">{{ info.port }}/{{ info.name|default:"unknown" }}</div>
                                                        {% endfor %}
                                                        </td>
                                                    </tr>
                                                    {% if data.bugs %}
                                                        <tr>
                                                            <td>{% trans "Warning" %}</td>
                                                            <td>{% for k,v in data.bugs.items %}
                                                                <div class="badge badge-primary badge-pill">{{ k }}:{{ v }}</div>
                                                            {% endfor %}
                                                            </td>
                                                        </tr>
                                                    {% endif %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 mt-5">
                                                <h5 class="mb-5">{% trans "Relevance" %}</h5>
                                                <div class="stage-wrapper pl-4">
                                                    <div class="stages border-left pl-5 pb-4">
                                                        <div class="btn btn-icons btn-rounded stage-badge btn-inverse-success">
                                                            <i class="icon-event"></i>
                                                        </div>
                                                        <div class="d-flex align-items-center mb-2 justify-content-between">
                                                            <h5 class="mb-0">{% trans "Third information" %}</h5>
                                                        </div>

                                                        {{ third_infomation|safe }}
                                                    </div>
                                                    <div class="stages border-left pl-5 pb-4">
                                                        <div class="btn btn-icons btn-rounded stage-badge btn-inverse-danger">
                                                            <i class="icon-cloud-download"></i>

                                                        </div>
                                                        <div class="d-flex align-items-center mb-2 justify-content-between">
                                                            <h5 class="mb-0">{% trans "Open services" %}</h5>
                                                        </div>

                                                        <p>
                                                        <div class="table-responsive">
                                                            <table class="table">
                                                                <thead>
                                                                <tr>
                                                                    <th>{% trans "Port" %}</th>
                                                                    <th>{% trans "Service type" %}</th>
                                                                    <th>{% trans "Service name" %}</th>
                                                                    <th>{% trans "Version" %}</th>
                                                                </tr>
                                                                </thead>
                                                                <tbody>
                                                                {% for info in data.infos %}
                                                                    <tr>
                                                                        <td>{{ info.port }}</td>
                                                                        <td>{{ info.name }}</td>
                                                                        <td>{{ info.product }}</td>
                                                                        <td>{{ info.version }} {{ info.extrainfo }}</td>
                                                                    </tr>
                                                                {% endfor %}
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        </p>
                                                    </div>
                                                    <div class="stages pl-5 pb-4">
                                                        <div class="btn btn-icons btn-rounded stage-badge btn-inverse-primary">
                                                            <i class="icon-checkbox-marked-circle-outline"></i>
                                                        </div>
                                                        <div class="d-flex align-items-center mb-2 justify-content-between">
                                                            <h5 class="mb-0">{% trans "Relevance http" %}</h5>
                                                        </div>
                                                        <p>{% trans "Port" %}</p>
                                                        <ul class="list-ticked">
                                                            {% for u in union %}
                                                                <li>
                                                                    <a href="{% url 'detail' u.id %}">{{ u.url }}</a> {{ u.title }}
                                                                </li>
                                                            {% endfor %}
                                                        </ul>
                                                        {% if c_data %}
                                                            <p>{% trans "Http service associated with Ip" %}</p>
                                                            <ul class="list-ticked">
                                                                {% for u in c_data %}

                                                                    <li>
                                                                        <a href="{% url 'detail' u.id %}">{{ u.ip }}</a>&nbsp;&nbsp;&nbsp;{{ u.extrainfo }}
                                                                        {% if u.data %}
                                                                            <ul>
                                                                                {% for i in u.data %}
                                                                                    <li>
                                                                                        <a href="{% url 'detail' i.id %}">{{ i.url }}</a> {{ i.title }}
                                                                                    </li>
                                                                                {% endfor %}
                                                                            </ul>
                                                                        {% endif %}
                                                                    </li>
                                                                {% endfor %}
                                                            </ul>
                                                        {% endif %}
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="user-profile-activity" role="tabpanel"
                                         aria-labelledby="user-profile-activity-tab">
                                        <div class="horizontal-timeline">
                                            <section class="time-frame">
                                                <h4 class="section-time-frame">History</h4>
                                                {% for h in historys %}
                                                    <div class="event">
                                                        <p class="event-text"><a
                                                                href="{% url 'detail' h.meta.id %}">{{ h.target }}</a>
                                                        </p>
                                                        <div class="event-alert">
                                                            <i class="flag-icon flag-icon-{{ data.location.country_id|lower }}"></i> {{ data.location.country }}
                                                            {{ data.location.region }}
                                                            <br>
                                                            Open ports:
                                                            {% for info in data.infos %}
                                                                <span>{{ info.port }}/{{ info.name|default:"unknown" }}</span>
                                                            {% endfor %}
                                                        </div>
                                                        <div class="event-info">{{ h.published_from }}</div>
                                                    </div>
                                                {% endfor %}
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extrascript %}
    <script src="/static/js/form-addons.js"></script>
{% endblock %}
